<!--
 * @author luguoxiang
 * @date 2022/9/17
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <div class="app-page-split">
    <t-card
      title="缓存信息"
      header-bordered
      class="gl-h100 gl-card-auto-size"
      style="width: 600px; overflow: hidden; padding: 0"
    >
      <template #actions><span class="gl-hover" @click="getCache">刷新</span></template>
      <lg-auto-size>
        <t-descriptions bordered :column="1">
          <t-descriptions-item label="缓存类型">{{ baseCache.cacheName }}</t-descriptions-item>
          <t-descriptions-item label="当前记录">{{ baseCache.usedEntries }}</t-descriptions-item>
          <t-descriptions-item label="已使用内存">{{ fileSize(baseCache.usedMemory) }}</t-descriptions-item>
          <t-descriptions-item label="最大内存">{{ fileSize(baseCache.maxMemory) }}</t-descriptions-item>
          <t-descriptions-item label="启动时长">{{ durationFormat(baseCache.uptime) }}</t-descriptions-item>
          <t-descriptions-item v-for="(v, l) in cache" :label="cacheNames[l] || l">{{ v }}</t-descriptions-item>
        </t-descriptions>
      </lg-auto-size>
    </t-card>
    <t-card
      title="jvm信息"
      header-bordered
      class="gl-h100 gl-card-auto-size"
      style="width: 600px; overflow: hidden; padding: 0"
    >
      <template #actions><span class="gl-hover" @click="getJvm">刷新</span></template>
      <lg-auto-size>
        <t-descriptions bordered :column="1">
          <t-descriptions-item label="可用内存">{{ fileSize(jvm.free) }}</t-descriptions-item>
          <t-descriptions-item label="已使用内存">{{ fileSize(jvm.used) }}</t-descriptions-item>
          <t-descriptions-item label="最大内存">{{ fileSize(jvm.max) }}</t-descriptions-item>
          <t-descriptions-item label="eden">{{ fileSize(jvm.eden.used) }}</t-descriptions-item>
          <t-descriptions-item label="survivor">{{ fileSize(jvm.survivor.used) }}</t-descriptions-item>
          <t-descriptions-item label="old">{{ fileSize(jvm.old.used) }}</t-descriptions-item>
        </t-descriptions>
      </lg-auto-size>
    </t-card>
    <t-card
      title="磁盘信息"
      header-bordered
      class="gl-h100 gl-card-auto-size"
      style="width: 600px; overflow: hidden; padding: 0"
    >
      <template #actions><span class="gl-hover" @click="getDisk">刷新</span></template>
      <lg-auto-size>
        <t-table :columns="diskColumns" :data="disk" bordered> </t-table>
      </lg-auto-size>
    </t-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import api from './api';
import LgAutoSize from '@/soar/components/LgAutoSize/index.vue';
import { durationFormat, fileSize } from '@/soar';
import { cacheNames, diskColumns } from './schema';

const baseCache = ref({
  cacheName: null,
  usedEntries: null,
  usedMemory: null,
  maxMemory: null,
  uptime: null,
});
const cache = ref();
function getCache() {
  api.cache().then((res: any) => {
    baseCache.value.cacheName = res.cacheName;
    delete res.cacheName;
    baseCache.value.usedEntries = res.usedEntries;
    delete res.usedEntries;
    baseCache.value.usedMemory = res.usedMemory;
    delete res.usedMemory;
    baseCache.value.maxMemory = res.maxMemory;
    delete res.maxMemory;
    baseCache.value.uptime = res.uptime;
    delete res.uptime;
    if (res.dbs) {
      for (const k in res.dbs) {
        res[`db${k}`] = res.dbs[k];
      }
      delete res.dbs;
    }
    cache.value = res;
  });
}
getCache();

const jvm = ref();
function getJvm() {
  api.jvm().then((res: any) => {
    jvm.value = res;
  });
}
getJvm();

const disk = ref();
function getDisk() {
  api.disk().then((res: any) => {
    disk.value = res;
  });
}
getDisk();
</script>

<style lang="less" scoped></style>
